<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">商城管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">商品信息</li>
    </ol>
</nav>

<!-- 新增商品的模态框 -->
<div class="modal fade" id="modal-insert" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-insert-h5">添加商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <form id="form-insert" class="row g-3 row">
                    <div class="col-md-7">
                        <nav class="text-center">
                            <img id="modal-insert-img" alt="..." src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/%E6%B7%BB%E5%8A%A0%E5%95%86%E5%93%81.png" class="ms-img-product ms-img-product-detail">
                            <input hidden name="img" type="file" accept="image/*"/>
                        </nav>
                        <nav class="text-center mt-3">
                            <button class="btn btn-primary" type="button" onclick="selectProductImg()">设置商品图片</button>
                        </nav>
                    </div>
                    <div class="col-md-5">
                        <div class="col-md-8">
                            <label for="edit-id" class="form-label">商品ID</label>
                            <input name="id" type="text" readonly class="form-control" id="insert-id" placeholder="">
                        </div>
                        <div class="col-md-8">
                            <label for="insert-name" class="form-label">商品名称</label>
                            <input name="name" type="text" class="form-control" id="insert-name" placeholder="">
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="insert-name-fail" class="invalid-feedback">
                                提示: 商品名称不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="insert-category-id" class="form-label">商品类型</label>
                            <select name="categoryId" type="text" class="form-control form-select" id="insert-category-id" placeholder="">
                                <option>1</option>
                            </select>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="insert-category-fail" class="invalid-feedback">
                                提示: 商品名称不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="insert-price" class="form-label ">价格(单位: 元)</label>
                            <input name="price" type="text" class="form-control" id="insert-price">
                            <div class="valid-feedback">
                                提示: 价格不可为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="insert-stock" class="form-label">商品库存(单位:件)</label>
                            <input name="stock" type="text" class="form-control" id="insert-stock">
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="insert-stock-fail" class="invalid-feedback">
                                提示: 联系方式不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="insert-provider-id" class="form-label">供应商名称</label>
                            <select name="providerId" type="text" class="form-select form-control" id="insert-provider-id">
                            </select>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="insert-fail" class="invalid-feedback">
                                提示: 联系方式不能为空
                            </div>
                        </div>
                    </div>

                    <hr>
                    <div class="col-md-12">
                        <label for="edit-detail" class="form-label">商品描述</label>
                        <textarea required name="detail" type="text" class="form-control" id="insert-detail" rows="3">
                            </textarea>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="insert-detail-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary float-md-start" style="width: 48%" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" style="width: 48%" onclick="insertProduct('#form-insert')">添加</button>
            </div>
        </div>
    </div>
</div>

<!--查看基本信息的模态框-->
<div class="modal fade" id="modal-show" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-show-h5">查看商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <form id="modal-show-form" class="row g-3 row">
                    <div class="col-md-7">
                        <nav class="text-center">
                            <img alt="..." src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/image-default-head/%E5%A4%B4%E5%83%8F-%E5%A5%B3%E5%AD%A6%E7%94%9F5.png" class="ms-img-product ms-img-product-detail">
                        </nav>
                    </div>
                    <div class="col-md-5">
                        <div class="col-md-8">
                            <label for="show-id" class="form-label">商品ID</label>
                            <input readonly name="id" type="text"  class="form-control" id="show-id" placeholder="">
                        </div>
                        <div class="col-md-8">
                            <label for="ms-form-user-base-username" class="form-label">商品名称</label>
                            <input readonly name="name" type="text" class="form-control" id="show-name" placeholder="">
                        </div>
                        <div class="col-md-8">
                            <label for="show-category-id" class="form-label">商品类型</label>
                            <select readonly name="category-id" type="text" class="form-control form-select" id="show-category-id" placeholder="">
                                <option>1</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label for="ms-form-user-base-code" class="form-label ">价格(单位: 元)</label>
                            <input readonly name="price" type="text" class="form-control" id="show-category-price">
                        </div>
                        <div class="col-md-8">
                            <label for="show-stock" class="form-label">商品库存(单位:件)</label>
                            <input readonly name="stock" type="text" class="form-control" id="show-stock">
                        </div>
                        <div class="col-md-8">
                            <label for="edit-provider-name" class="form-label">供应商名称</label>
                            <select readonly name="provider-id" type="text" class="form-select form-control" id="show-provider-name">
                                <option>啊</option>
                            </select>
                        </div>
                    </div>

                    <hr>
                    <div class="col-md-12">
                        <label for="show-detail" class="form-label">商品描述</label>
                        <textarea readonly name="detail" type="text" class="form-control" id="show-detail" rows="3">
                            </textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改商品图片的模态框 -->
<div class="modal fade" id="modal-img" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-img-h5">编辑商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <div class="container p-3 row" id="Tz_box" xmlns:th="http://www.thymeleaf.org">
                    <h2 class="text-center">修改商品图片</h2>
                    <div class="col-md-1"></div>
                    <div class="col-md-12">
                        <input type="file" id="input" size="10" style="visibility:hidden;"/>
                        <canvas id="Tz_wrap" class="shadow"></canvas>
                        <p class="text-center">请拖拽图片至此区域</p>
                    </div>
                    <div class="col-md-5 align-self-end text-center">

                    </div>
                    <nav class="text-center mb-5">
                        <div class="btn btn-primary mx-3"  id="upload">⇧<span>上传图片</span></div>
                        <div class="btn btn-primary mx-3" id="rotateLeftBtn">↶<span>左旋转</span></div>
                        <div class="btn btn-primary mx-3"  id="rotateRightBtn">↷<span>左旋转</span></div>
                    </nav>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-img-save" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!--修改基本信息的模态框-->
<div class="modal fade" id="modal-base" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-base-h5">编辑商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <form id="modal-edit" class="row g-3 row">
                    <div class="col-md-7">
                        <nav class="text-center">
                            <img alt="..." src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/image-default-head/%E5%A4%B4%E5%83%8F-%E5%A5%B3%E5%AD%A6%E7%94%9F5.png" class="ms-img-product ms-img-product-detail">
                        </nav>
                        <nav class="text-center mt-3">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-img" type="button" onclick="renderProductId()">设置商品图片</button>
                        </nav>
                    </div>
                    <div class="col-md-5">
                        <div class="col-md-8">
                            <label for="edit-id" class="form-label">商品ID</label>
                            <input name="id" type="text" readonly class="form-control" id="edit-id" placeholder="">
                        </div>
                        <div class="col-md-8">
                            <label for="ms-form-user-base-username" class="form-label">商品名称</label>
                            <input name="name" type="text" class="form-control" id="ms-form-user-base-username" placeholder="">
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-user-base-username-fail" class="invalid-feedback">
                                提示: 商品名称不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="edit-category-id" class="form-label">商品类型</label>
                            <select name="category-id" type="text" class="form-control form-select" id="edit-category-id" placeholder="">
                                <option>1</option>
                            </select>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="edit-category-fail" class="invalid-feedback">
                                提示: 商品名称不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="ms-form-user-base-code" class="form-label ">价格(单位: 元)</label>
                            <input name="price" type="text" class="form-control" id="ms-form-user-base-code">
                            <div class="valid-feedback">
                                提示: 价格不可为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="edit-stock" class="form-label">商品库存(单位:件)</label>
                            <input name="stock" type="text" class="form-control" id="edit-stock">
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-user-base-tel-fail" class="invalid-feedback">
                                提示: 联系方式不能为空
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="edit-provider-name" class="form-label">供应商名称</label>
                            <select name="provider-id" type="text" class="form-select form-control" id="edit-provider-name">
                                <option>啊</option>
                            </select>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="edit-providerName-fail" class="invalid-feedback">
                                提示: 联系方式不能为空
                            </div>
                        </div>
                     </div>

                    <hr>
                    <div class="col-md-12">
                        <label for="edit-detail" class="form-label">商品描述</label>
                        <textarea required name="detail" type="text" class="form-control" id="edit-detail" rows="3">
                            </textarea>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-email-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary float-md-start" style="width: 48%" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure" type="button" class="btn btn-primary" style="width: 48%" onclick="saveProduct('#modal-edit')">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 自定义头像的模态框 -->
<div class="modal fade" id="modal-head-custom" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-head-custom-h5" aria-hidden="false"
     xmlns:th="http://www.thymeleaf.org">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-head-custom-h5">编辑用户信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body container">
                <div class="shadow p-3 row" id="Tz_box" >
                    <h2 class="text-center">自定义头像</h2>
                    <div class="col-md-1"></div>
                    <div class="col-md-6">
                        <input type="file" id="input" size="10" style="visibility:hidden;"/>
                        <canvas id="Tz_wrap" class="shadow"></canvas>
                        <p class="text-center">请拖拽图片至此区域</p>
                    </div>
                    <div class="col-md-5 align-self-end text-center">

                        <div>
                            <canvas id="plugin-imgUpload-final-img" class="preview shadow"></canvas>
                            <p class="tit">图片预览:200*200</p>
                            <div class="prev"><img src="" id="imgg"></div>
                        </div>
                    </div>
                    <nav class="text-center mb-5">
                        <div class="btn btn-primary mx-3"  id="upload">⇧<span>上传图片</span></div>
                        <div class="btn btn-primary mx-3" id="rotateLeftBtn">↶<span>左旋转</span></div>
                        <div class="btn btn-primary mx-3"  id="rotateRightBtn">↷<span>左旋转</span></div>
                    </nav>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure-custom" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

</div>
<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <!-- 搜索框 开始 -->
    <div class="input-group mb-3 w-50 ">
        <input id="input-search-role" type="text" class="form-control" placeholder="输入商品名称"
               aria-describedby="btn-search-role">
        <button class="btn btn-primary" type="button" onclick="searchProduct(this)">搜索</button>
    </div>
    <!-- 搜索框 结束 -->

    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-primary ml-auto" onclick="renderModalInsert(this)" data-bs-toggle="modal" data-bs-target="#modal-insert">新增</button>
        <button class="btn btn-danger ml-auto" onclick="removeProducts()" data-bs-toggle="modal" data-bs-target="#modal-role">批量删除</button>
    </div>
    <h6 id="textShowResult" class="text-dark">共0条结果</h6>
    <table class="table table-bordered text-center">
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 5%;">ID</td>
            <td style="width: 6%;">名称</td>
            <td style="width: 4%;">分类</td>
            <td style="width: 8%">图片</td>
            <td style="width: 6%;">描述</td>
            <td style="width: 4%;">存货</td>
            <td style="width: 15%;">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-product-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-product-pages-entry" class="Page navigation mb-0"></nav>